<script setup>
import {Lock, User} from "@element-plus/icons-vue";
import {ref} from "vue";
const registerData = ref({
  olePassword:'',
  password:'',
  rePassword:''
})
const checkRePassword = (rule, value, callback) => {
  if (value == null){
    callback(new Error('请再次输入密码'));
  }else if (value !== registerData.value.password){
    callback(new  Error ('请确认两次密码相同'));
  }else{
    callback();
  }
}
const rules = {
  olePassword: [
    {required: true, message: '请输入旧密码', trigger: "blur"},
    {min: 5, max: 12, message: '请输入5到12位的用户名', trigger: "blur"}
  ],
  password: [
    {required: true, message: '请输入密码', trigger: "blur"},
    {min: 5, max: 12, message: '请输入5到12位的密码', trigger: "blur"}
  ],
  rePassword: [
    {validator: checkRePassword, trigger: "blur"}
  ]
}
import {userResetPaService} from '@/api/manger.js';
import {ElMessage} from "element-plus";
import router from "@/router/index.js";
import {useTokenStore} from "@/Stores/token.js";

const tokenstore = useTokenStore();
const resetPassword = async () => {
  let data = {
    old_pwd: registerData.value.olePassword,
    new_pwd: registerData.value.password,
    re_pwd: registerData.value.rePassword
  }
  let result = await userResetPaService(data, tokenstore)
  ElMessage.success(result.msg ? result.msg : '修改成功')
  router.push('/')
}
const gotoin = () => {
  router.push('/')
}
</script>

<template>
  <div class="page-container">
  <el-card class="box-card">
    <h1 style="display: flex;justify-content: center;align-items: center;margin-top: 0">修改密码</h1>
      <el-col class="form">
        <el-form ref="form" size="large" autocomplete="off" :model="registerData" :rules="rules">
          <el-form-item prop="username" >
            <el-input :prefix-icon="User" placeholder="请输入旧密码" v-model="registerData.olePassword"></el-input>
          </el-form-item>
          <el-form-item prop="password" >
            <el-input :prefix-icon="Lock" type="password" placeholder="请输入密码" v-model="registerData.password"></el-input>
          </el-form-item>
          <el-form-item prop="rePassword">
            <el-input :prefix-icon="Lock" type="password" placeholder="请输入再次密码" v-model="registerData.rePassword"></el-input>
          </el-form-item>
          <!-- 注册按钮 -->
          <el-form-item >
            <div class="flex">
              <el-button @click="resetPassword" type="primary" auto-insert-space>
            确认
          </el-button>
            <el-button type="primary" :underline="false" @click="gotoin" auto-insert-space>
              取消
            </el-button></div>
          </el-form-item>
        </el-form>
      </el-col>
  </el-card>
  </div>
</template>
<style lang="scss" scoped>
.page-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 70vh; /* 容器高度 */
}

.box-card{
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 55vh;
  height: 55vh;
}
  .bg {
    border-radius: 0 20px 20px 0;
    //background-image: url("@/assets/001 Warm Flame.png");
  }

.form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  user-select: none;

  .button {
    width: 100%;
    margin-bottom: 0;
  }

  .flex {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 0;
    margin-bottom: 4px;
  }
}

</style>
